<template>
	<view>
		<view class="top-box align_center flex_start flex">
			<view class="topimg tp-ptb0lr30">
				<image class="tp-br12" :src="Message.jqImg" mode=""></image>
			</view>
			<view class="flex-1 flex flex_between flex_column" style="height: 142rpx;">
				<view class="tp-fz28 ">
					<text class="" style="font-weight: bold;">{{Message.jqName}}</text>
					<view class="level_align tp-mt10">
						<image class="tp-img28 tp-mr10" src="../static/icon/position1.png" mode=""></image>
						<text class="flex-1 tp-fz24 ellispsis1 tp-fc666">{{Message.jqAddr}}</text>
					</view>
				</view>
				<view class="">
					<!-- <text class="tp-red tp-mr10">¥</text> -->
					<text style="font-weight: bold;" class="tp-fz36 tp-red">{{pollList.ticketsName}}</text>
				</view>
			</view>
		</view>
		<!-- 使用时间 S-->
		<view class="level_align tp-bdbm tp-h98 tp-bgf tp-ptb0lr30 tp-mt20">
			<text class="tp-fz30 tp-mr30 ">使用时间</text>
			<view class="level_align flex-1 flex_end" @click="pageJumps('/pages/others/calendar?sts=go&durationDay=100800')">
				<view class="tp-fc333 tp-fz28" v-if="usetime"> {{usetime}} </view>
				<view class="tp-fc999" v-else> 请选择 </view>
				<!-- <input class="tp-tr tp-mr10 flex-1 flex flex_end" type="text" disabled placeholder="请选择"  v-model="usetime" /> -->
				<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
			</view>
		</view>
		<!-- 使用时间 E-->
		<!-- 票数 S-->
		<view class="level_align tp-bdbm tp-h98 tp-bgf tp-ptb0lr30 tp-mt20" v-for="(item,index) in pollList.skuList" :key='index'>
			<text class="tp-fz30 tp-mr30 ">{{item.skuName}}</text>
			<view class="level_align flex-1 flex_end">
				<!-- <input style="width: 240rpx;" type="text" disabled /> -->
				<text class="tp-fc333">￥{{item.skuPrice}}</text>
			</view>
			<view class="level_align  flex_end" style="width: 200rpx;">
				<uni-icons @click="reduceperson(item,index)" class="tp-mr20" type="minus" size="22" color="#00B4FF"></uni-icons>
				<text class="tp-fz30">{{item.pollnum}}</text>
				<uni-icons @click="addperson(item,index)" class="tp-ml20" type="plus-filled" size="22" color="#00B4FF"></uni-icons>
			</view>
		</view>
		<!-- 票数 E-->
		<!-- 游客信息 S-->
		<view class="message tp-mt20">
			<view class="messagetop">
				<view class="common_tit-wrap tp-w690">
					<view class="l-wrap" style="font-weight: 500;">游客信息</view>
					<view class="rwrap tp-fz26 tp-lh54 tp-tc tp-fc" @click="pageJumps('/pagesSecond/hotel/selectMember')">
						添加
					</view>
				</view>
			</view>
			<view style="height:20rpx"></view>
		</view>
		<view class="level_align tp-bdbm tp-h98 tp-bgf tp-ptb0lr30 " v-for="(item,index) in riderPersionList" :key="index">
			<view class="level_align flex-1">
				<image class="tp-img28 tp-mr20" src="../static/icon/delete.png" mode="" @click="handleDelRider(item)"></image>
				<text class="tp-fz30 tp-mr20 ellispsis1 tp-fw600" style="font-weight: bold;">{{item.passengerName}}</text>
				<text class="tp-fz28 tp-mr20 ">{{item.phone}}</text>
				<text class="tp-fz28 ">{{item.star}}</text>
			</view>

			<view class="level_align flex_end" @click="pageJumps('/pagesTravel/bus.addRider?id=' + item.id + '&scene=1')">
				<uni-icons type="arrowright" size="20" color="#999" @click="pageJumps('/pagesSecond/hotel/selectMember')"></uni-icons>
			</view>
		</view>
		<!-- 游客信息 E-->
		<!-- 联系信息 S-->
		<view class="message tp-mt20">
			<view class="messagetop">
				<view class="common_tit-wrap tp-w690">
					<view class="l-wrap" style="font-weight: 500;">联系信息</view>
				</view>
			</view>
			<view style="height:20rpx"></view>
		</view>
		<view class="level_align tp-bdbm tp-h98 tp-ptb0lr30 tp-fz28" style="background: #FFFFFF;">
			<text class="tp-fz30" style="margin-right: 60rpx;">姓</text><text class="tp-fz30 tp-mr30">名：</text>
			<view class="level_align flex-1 flex_end ">
				<input type="text" placeholder="请填写联系人姓名" v-model="theperson" />
			</view>
		</view>
		<view class="level_align tp-bdbm tp-h98 tp-ptb0lr30 tp-fz28" style="background: #FFFFFF;">
			<text class="tp-fz30 tp-mr30">联系电话：</text>
			<view class="level_align flex-1 flex_end">
				<input type="number" placeholder="请填写联系电话" maxlength="11" :value="phone" />
			</view>
		</view>
		<!-- 联系信息 E-->
		<!-- 优惠 S-->
		<view class="message tp-mt20">
			<view class="messagetop">
				<view class="common_tit-wrap tp-w690">
					<view class="l-wrap" style="font-weight: 500;">优惠</view>
				</view>
			</view>
			<view style="height:20rpx"></view>
		</view>
		<view class="level_align tp-bdbm tp-h98 tp-bgf tp-ptb0lr30 " @click="handleGoBusCouponList">
			<text class="tp-fz30 tp-mr30 ">优惠劵</text>
			<view class="level_align flex-1 flex_end">
				<input type="text" disabled :placeholder="integralPlacholde" :value="choosedBusCoupon.couponName" />
				<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
			</view>
		</view>
		<view class="level_align tp-bdbm tp-h98 tp-bgf tp-ptb0lr30 ">
			<text class="tp-fz30 tp-mr30 ">积分抵扣</text>
			<view class="level_align flex-1 flex_end">
				<input type="number" :placeholder="maxYongJifen" v-model="jifen" @input="inputJifen" />
			</view>
		</view>
		<view class="level_align tp-bdbm tp-h98 tp-bgf tp-ptb0lr30 ">
			<text class="tp-fz30 tp-mr30 ">订单可获积分</text>
			<view class="level_align flex-1 flex_end">
				<input type="number" disabled=""  v-model="rewardJifen"  />
			</view>
		</view>
		<!-- 优惠 E-->
		<!-- 购买须知 S-->
		<view class="thatYk tp-ptb0lr30">
			<view class="tp-pt20" @click="bxtype = !bxtype">
				<image v-if="bxtype" style="width: 24rpx;height: 24rpx;margin-right: 20rpx;" src="../static/icon/choose1-icon.png"
				 mode="aspectFill"></image>
				<image v-if="!bxtype" style="width: 24rpx;height: 24rpx;margin-right: 20rpx;" src="../static/icon/choose0-icon.png"
				 mode="aspectFill"></image>
				<text class="tp-fz28">请您仔细阅读</text>
				<text class="tp-fz28 " style="color: #00b4ff;" @click.stop="pageJumps('/pages/others/depositRule?type=16&name=景区订单说明')">《景区订单说明》</text>
				<!-- @click.stop="handleGoInsuranceDetail(it_n, 2)" -->
			</view>
		</view>
		<!-- 购买须知 E-->
		<view style="height: 100rpx;"></view>
		<!-- 底边框 S -->
		<view class="tp-h98 level_align tp-ptb0lr30 tp-bbox flex_between tp-bgf tp-btn-h100" style="z-index: 10;">
			<view class="level_align">
				<text class="tp-fz26 tp-fc333 tp-mr15">总价：</text>
				<text class="tp-fz36 tp-red">￥{{totalMoney}}</text>
			</view>
			<view class="level_align">
				<view class="level_align tp-mr30" @click="handleShowPriceDetail">
					<text class="tp-fz26 tp-fc333 tp-mr15">明细</text>
					<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
				</view>
				<view @click="handeSubmitOrder" class="tp-br12 tp-fcF tp-fz32 tp-h72 center_combo" style="background: #FFAF3C;width: 240rpx;">
					预定
				</view>
			</view>
		</view>
		<!-- 底边框 E -->
		<uni-popup ref="priceDetail" type="bottom">
			<view class="popop_content">
				<view class="tp-ptb0lr30 tp-fz30">
					<view class="tp-h88 level_align flex_between tp-bdbm" v-for="(item,index) in pollList.skuList" :key='index'>
						<text>{{item.skuName}}</text>
						<view class="level_align">
							<text>￥{{item.allprice}}</text>
						</view>
					</view>
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>门票总价格</text>
						<view class="level_align">
							<text>￥{{piaojia}}</text>
						</view>
					</view>
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>优惠券抵扣</text>
						<view class="level_align">
							<text>-￥{{choosedBusCoupon && choosedBusCoupon.amount || 0}}</text>
						</view>
					</view>
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>积分抵扣</text>
						<view class="level_align">
							<text>-￥{{trueJifen}}({{submitJifen}}积分)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tp-h2 tp-bcF5"></view>
			<view class="tp-h98 level_align tp-ptb0lr30 tp-bbox flex_between tp-bgf tp-btn-h100" style="z-index: 10;">
				<view class="level_align">
					<text class="tp-fz26 tp-fc333 tp-mr15">总价：</text>
					<text class="tp-fz36 tp-red">￥{{totalMoney}}</text>
				</view>
				<view class="level_align">
					<view class="level_align tp-mr30" @click="handleShowPriceDetail('close')">
						<text class="tp-fz26 tp-fc333 tp-mr15">明细</text>
						<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
					</view>
					<view @click="handeSubmitOrder" class="tp-br12 tp-fcF tp-fz32 tp-h72 center_combo" style="background: #FFAF3C;width: 240rpx;">
						预定
					</view>
				</view>
			</view>
		</uni-popup>
		<CommonPaySecond ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @cancle="noPay" @closeK="noPay" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	import CommonPaySecond from '../common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		data() {
			return {
				bxtype: false, //是否勾选购买须知
				pollList: [], //门票列表
				personNum: 0, //票数
				piaojia: 0, //门票未优惠的价格
				piaonum: 0, //门票总数
				couponList: [], // 优惠券列表
				rewardJifen: 0, // 离店可获积分
				jqCustomerCouponId: '', //景区的选择优惠劵id
				maxYongJifen: '', // 可用积分说明
				jifen: null, // 输入框输入的
				submitJifen: 0, //用户积分
				trueJifen: 0, // 实际抵扣积分
				// childNum:0,//儿童
				textType: ['游记', '摄影', '短视频'], //类别
				usetime: '', //使用时间
				theperson: '', //联系人
				phone: '', //联系人手机号
				Message: {}, //传来的页面数据
				lbactive: {
					index: 0,
					name: ''
				},
				orderId: '', // 订单id
				choosedDateObj: {}, // 入住时间
				rewardJifen:0,//奖励积分
			};
		},
		async onLoad(opt) {
			console.log(JSON.parse(opt.Message));
			//接收的传值
			this.Message = opt.Message &&  JSON.parse(opt.Message)
			//这是门票种类的数量添加S--
			this.pollList = this.Message.ticketIntroList
			this.pollList.skuList.forEach(item => {
				this.$set(item, 'pollnum', 0)
				this.$set(item, 'allprice', 0)
			})
			//这是门票种类的数量添加E--
			//选择的日期
			this.$store.commit('delHomeChoosedDateObj')
			this.$store.commit('delChoosedBusCoupon')
			this.$store.commit('delRiderList')
			await this.getcustomerInfo()
			this.phone = this.getCustomerInfo.mobile
			if (Number(this.getCustomerInfo.rewardPoint) < Number(this.Message.maxJifen)) {
				this.maxYongJifen = '当前拥有 ' + this.getCustomerInfo.rewardPoint + ' 积分，最多可抵扣 ' + this.getCustomerInfo.rewardPoint +
					' 积分'
			} else {
				this.maxYongJifen = '当前拥有 ' + this.getCustomerInfo.rewardPoint + ' 积分，最多可抵扣 ' + (this.Message.maxJifen || 0) +
					' 积分'
			}
		},
		onShow() {
			this.updateChoosedDate();
		},
		computed: {
			// 积分选择提示
			integralPlacholde() {
				return this.couponList.length === 0 ? '暂无优惠券可用' : '点我选择优惠券'
			},
			
			// 优惠前的价格
			originalPrice(){
				let money = 0;
				if(this.pollList.skuList && this.pollList.skuList.length){
					this.pollList.skuList.forEach(item => {
						money += Number(item.allprice)
					})
				}
				money = parseFloat((money).toFixed(2))
				return money
			},
			
			//价格计算
			totalMoney() {
				let money = 0;
				this.piaojia = 0;
				this.piaonum = 0;
				if(this.pollList.skuList && this.pollList.skuList.length ){
					this.pollList.skuList.forEach(item => {
						this.piaonum += item.pollnum
						money +=  Number(item.allprice)
					})
				}
				this.piaojia = money
				// 优惠券抵扣
				if (this.choosedBusCoupon && this.choosedBusCoupon.amount) {
					money -= Number(this.choosedBusCoupon.amount)
					if(money < 0){
						money = 0
					}
				}
				// 积分抵扣
				if (money > (Number(this.Message.maxJifen) / 100) || money > (Number(this.jifen) / 100)) { // 房间费用大于 最多抵扣积分或者  输入的积分 才可以使用积分
					if (Number(this.getCustomerInfo.rewardPoint) < Number(this.Message.maxJifen) && Number(this.jifen) > Number(this.getCustomerInfo.rewardPoint)) {
						// 当前拥有的 小于 可抵扣的  并且  输入的积分 大于 当前拥有的  取 当前拥有的所有积分
						this.trueJifen = parseFloat((( Number(this.getCustomerInfo.rewardPoint) / 100) * Number(this.getCustomerInfo.jifenDiscount))
							.toFixed(2))
						this.submitJifen = this.getCustomerInfo.rewardPoint 
					} else if ( Number(this.jifen) >  Number(this.Message.maxJifen)) {
						// 积分充足 并且 输入的积分 大于 可抵扣的 取 可抵扣的
						this.trueJifen = parseFloat((( Number(this.Message.maxJifen) / 100) * Number(this.getCustomerInfo.jifenDiscount)).toFixed(
							2))
						this.submitJifen = this.Message.maxJifen
					} else {
						// 积分充足 并且 输入的积分小于可抵扣的  取 输入的
						this.trueJifen = parseFloat(((Number(this.jifen) / 100) * Number(this.getCustomerInfo.jifenDiscount)).toFixed(2))
						this.submitJifen = this.jifen ||　0
					}
				}

				if (money != 0) {
					money -= Number(this.trueJifen)
				}
				money = parseFloat((money).toFixed(2))
				return money
			},
			// 
			// 出行人
			riderPersionList() {
				let arr = this.$store.getters.getRiderList
				if (arr && arr[0] && arr[0].star) {
					return this.$store.getters.getRiderList
				} else {
					arr.map(item => {
						item.star = utils.employStarHidden(item.certificateNumber, 4, 4)
					})
					return arr
				}
			},
			orderInfo() {
				let o = {
					orderId: this.orderId,
					type: 1,
					orderType: 2
				}
				return o
			},
			choosedBusCoupon: {
				get() {
					return this.$store.getters.getChoosedBusCoupon
				},
				set() {}
			}
		},
		watch: {
			originalPrice() {
				this.scenicKyyouhui()
			},
			totalMoney() {
				this.getRewardJifen()
			},
		},
		methods: {
			// 奖励积分计算
			getRewardJifen() {
				this.$http.get(this.$api.rewardJifen + '?shopType=2&shopId=' + this.Message.jqId + '&orderPrice=' + this.totalMoney)
					.then(res => {
						if (res.code === 200) {
							this.rewardJifen = res.msg
							this.rewardJifen = parseFloat(this.rewardJifen.toFixed(0))
						}
					})
			},
			//选择的时间
			updateChoosedDate() {
				this.choosedDateObj = this.$store.getters.getHomeChoosedDateObj;
				let obj = this.$store.getters.getHomeChoosedDateObj.go_full; //go_full是2020-12-05
				this.usetime = obj
			},
			// 去除当前这个出行人
			handleDelRider(item) {
				this.riderPersionList.forEach((it_, in_) => {
					if (item.id === it_.id) {
						this.$store.commit('delRiderList', in_)
					}
				})
			},
			//获取可用的优惠劵
			scenicKyyouhui() {
				this.$http.get(this.$api.scenicKyyouhui + '?jqId=' + this.Message.jqId + '&orderPrice=' + this.originalPrice).then(res => {
					if (res.code == 200) {
						this.couponList = res.data
						if (!res.data.length) {
							this.$store.commit('delChoosedBusCoupon')
						}
					}
				})
			},
			// 输入积分
			inputJifen(e) {
				if (Number(e.detail.value) > Number(this.getCustomerInfo.rewardPoint)) {
					return uni.showToast({
						title: '没有这么多的积分',
						icon: 'none'
					})
				} else if (Number(e.detail.value) > Number(this.Message.maxJifen)) {
					return uni.showToast({
						title: '最多只能抵扣' + this.Message.maxJifen + '积分',
						icon: 'none'
					})
				}
			},
			//跳转选择优惠券列表
			handleGoBusCouponList() {
				if (!this.couponList.length) return
				uni.navigateTo({
					url: '/pagesSecond/hotel/selectCoupon?pageName=scenic&totalPrice=' + this.originalPrice + '&id=' + this.Message.jqId
				})
			},
			/* 增减游客人数S-- */
			addperson(item, index) {
				item.pollnum++
				item.allprice = item.pollnum * item.skuPrice
			},
			reduceperson(item, index) {
				if (item.pollnum > 0) {
					item.pollnum--
				}
				item.allprice = item.pollnum * item.skuPrice
			},
			/* 增减游客人数E-- */
			overp() {
				this.$refs.popup.close()
			},
			// 切换明细
			handleShowPriceDetail(s) {
				if (s === 'close') {
					this.$refs.priceDetail.close()
					this.textareaShow = true
				} else {
					this.$refs.priceDetail.open()
					this.textareaShow = false
				}
			},
			handeSubmitOrder() {
				if (!this.usetime) return uni.showToast({
					title: '使用时间不能为空',
					icon: 'none'
				})
				if (!this.theperson) return uni.showToast({
					title: '联系人不能为空',
					icon: 'none'
				})
				if (this.riderPersionList.length != this.piaonum) return uni.showToast({
					title: '游客数与票数不符',
					icon: 'none'
				})
				if (!this.bxtype) return uni.showToast({
					title: '请阅读协议',
					icon: 'none'
				})
				let arr = []
				let arrr = []
				for (let i = 0; i < this.pollList.skuList.length; i++) {
					let obj = {
						jqTicketSkuId: this.pollList.skuList[i].id,
						num: this.pollList.skuList[i].pollnum,
					}
					arr.push(obj)
				}
				this.riderPersionList.forEach(item => {
					let {
						id,
						phone,
						star,
						passengerName,
						fareType,
						certificateNumber,
					} = item
					let itemInfo = {
						id,
						phone,
						star,
						passengerName,
						fareType,
						certificateNumber,
					}
					arrr.push(itemInfo)
				})
				this.jqCustomerCouponId = this.choosedBusCoupon && this.choosedBusCoupon.jqCustomerCouponId && this.choosedBusCoupon
					.jqCustomerCouponId
				const params = {
					jqId: this.Message.jqId,
					useTime: this.usetime,
					name: this.theperson,
					phone: this.phone,
					ticketAndNumVos: arr,
					orderMemberVoList: arrr,
					jqCustomerCouponId: this.jqCustomerCouponId,
					jifen: this.submitJifen || 0,
					frontTotal: this.totalMoney,
				};
				const _this = this
				this.$http.post(this.$api.scenicPreUnifieldOrder + '?jqId=' + this.Message.jqId + '&orderPrice=' + this.totalMoney,
					params).then(res => {
					if (res.code == 200) {
						_this.$refs.commonPay.show()
						_this.orderId = res.data
						console.log(res.data);
					}
				})
			},
			// 积分支付成功
			payMoney(pwd) {
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(this.$api.scenicOrderByYue, {
					orderId: this.orderId,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.finishCloseKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						setTimeout(() =>{
							uni.redirectTo({
								url: '/pagesUser/order/scenicOrderDetail?id=' + this.orderId
							});
						},600)
						
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: '/pagesUser/order/scenicOrderDetail?id=' + this.orderId
					});
				},600)
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title: '取消支付',
					icon: 'none',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: '/pagesUser/order/scenicOrderDetail?id=' + this.orderId
					});
				},600)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		width: 100%;
		height: 202rpx;
		background: #FFFFFF;

		.topimg {
			width: 190rpx;
			height: 142rpx;
			border-radius: 12rpx;
		}
	}

	/* 游客信息 S*/
	.message {
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(152, 152, 152, 0.2);
		margin-bottom: 2rpx;
	}

	.messagetop {
		padding-top: 20rpx;
		width: 750rpx;
	}

	.common_tit-wrap {
		box-sizing: border-box;
		padding-top: 20rpx;
		padding: 20rpx 0 20rpx 0;
	}

	.rwrap {
		width: 120rpx;
		height: 54rpx;
		background: #FFFFFF;
		border: 2rpx solid #00B4FF;
		border-radius: 26rpx;

	}

	/* 游客信息 E*/
	/* 购买须知 S*/
	.thatYk {
		width: 100%;
		height: 90rpx;

	}

	/* 购买须知 E*/
	/* 明细 */
	.popop_content {
		background-color: #fff;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		padding: 20rpx 30rpx 98rpx;
	}
</style>
